import { Tabs } from 'nextra/components';
import { Widget } from '@/components/demo/widget.tsx';
import LinkBadge from '@/components/ui/link-badge/link-badge.tsx';
import LinkBadgeGroup from '@/components/ui/link-badge/link-badge-group.tsx';

# Card

A flexible container component that displays content with an optional title, subtitle, and child widget. Cards are commonly used to group related information and actions.

<LinkBadgeGroup>
    <LinkBadge label="API Reference" href="https://pub.dev/documentation/forui/latest/forui.widgets.card/"/>
</LinkBadgeGroup>

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
      <Widget name='card' query={{}}  height={400}/>
  </Tabs.Tab>
  <Tabs.Tab>
      ```dart copy
      FCard(
        image: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage(path('avatar.png')),
              fit: BoxFit.cover,
            ),
          ),
          height: 200,
        ),
        title: const Text('Gratitude'),
        subtitle: const Text('Being thankful and showing appreciation for kindness.'),
      );
      ```
  </Tabs.Tab>
</Tabs>

## CLI

To generate and customize this style:

```shell copy
dart run forui style create card
```

## Usage

### `FCard(...)`

```dart copy
FCard(
  style: FCardStyle(...),
  title: const Text('Notification'),
  subtitle: const Text('You have 3 unread messages.'),
  child: FButton(child: const Text('Read messages'), onPress: () {}),
);
```

### `FCard.raw(...)`

```dart copy
FCard.raw(
  style: FCardStyle(...),
  child: const Placeholder(),
);
```
